<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高</title>
    <style>
        .one{
            width: 200px;
            border: 10px solid red;
            padding: 20px;
            margin: 30px;
        }
        .father{
            width: 400px;
            height: 400px;
            border: 10px solid red;
            position: relative;
            top: 10px;
            left: 10px;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <input type="button" value="啪啪啪" id="btn">
    <div id="one" class="one" style="height: 200px"></div>
    <input type="button" value="offect()" id="btn1">
    <input type="button" value="position()" id="btn2">
    <div id="father" class="father">
        <div id="son" class="son"></div>
    </div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('#btn').click(function () {
           console.log($('#one').width());  // 获取宽高
           $('#one').width(300);   // 设置宽高
           console.log($('#one').innerWidth());   // 返回元素宽高含内边距
           console.log($('#one').outerWidth(true));   // 返回元素宽高含内边距和边框
           console.log($(window).width()); // 获取可视区域宽高
        });
        $('#btn1').click(function () {
            $('#son').offset(); // offset方法获取元素距离document的位置
            $('#son').position(); // position方法获取元素距离parent的位置
        });
    })
</script>
</html>